<template>
  <div class="image-container set-full-height" style="background-image: url('../../../static/images/wizard.jpg')">
    <a href="#/get-shit-done/index.html?ref=get-shit-done-bootstrap-wizard" class="made-with-mk">
      <div class="brand">LA</div>
      <div class="made-with">Made with <strong>Link Afri</strong></div>
    </a>

    <!--   Big container   -->
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">

          <!--      Wizard container        -->
          <div class="wizard-container">

            <div class="card wizard-card" data-color="orange" id="wizardProfile">
              <form action="" method="">
                <!--        You can switch ' data-color="orange" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

                <div class="wizard-header">
                  <h3>
                    <b>Login</b> YOUR Account <br>

                  </h3>
                </div>

                <div class="wizard-navigation">
                  <ul>
                    <li><a href="#about" data-toggle="tab">First</a></li>


                  </ul>

                </div>

                <div class="tab-content">
                  <div class="tab-pane" id="about">
                    <div class="row">
                      <h4 class="info-text"> Please Login Your Account</h4>

                      <div class="col-sm-11">
                        <div class="form-group">
                          <label>Name<small>(required)</small></label>
                          <input name="name" type="text" class="form-control" placeholder="Email or Name">
                        </div>
                        <div class="form-group">
                          <label>Password<small>(required)</small></label>
                          <input name="password"  id="password" type="password" class="form-control" placeholder="please inout your passworld">
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
                <div class="wizard-footer height-wizard">
                  <div class="text-center">
                    <router-link to="/home">
                    <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='login' value='Login' />

                    </router-link>
                  </div>
                  <div class="clearfix"></div>
                </div>

              </form>
            </div>
          </div> <!-- wizard container -->
        </div>
      </div><!-- end row -->
    </div> <!--  big container -->
  </div>

</template>

<script>

  export default {
    created() {

    },
    mounted(){
      searchVisible = 0
      transparent = true
      /*  Activate the tooltips      */
      $('[rel="tooltip"]').tooltip()

      // Code for the Validator
      var $validator = $('.wizard-card form').validate({
        /* rules: {
          name: {
            required: true,
            minlength: 3
          },
          password: {
            required: true,
            minlength: 6
          },
          confirmPassword: {
            required: true,
            minlength: 6,
            equalTo: "#password"
          },
          email: {
            required: true,
            minlength: 3,
            email: true
          }
        },
        messages: {
          name: {
            required: "please inout your name",
            minlength: "length must > 3"
          }, password: {
            required: "please inout your password",
            minlength: "length must > 6"
          },
          confirmPassword: {
            required: "please inout your confirmPassword",
            minlength: "length must > 6"
          },
          confirmPassword: {
            required: "please inout your confirmPassword",
            minlength: "length must > 6"
          }, email: {
            required: "please inout your email",
            minlength: "The email format is incorrect"
          },
        } */
      });

      console.info(1);

      // Wizard Initialization
      $('.wizard-card').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',

        onNext: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').valid()
          if (!$valid) {
            $validator.focusInvalid()
            return false
          }
        },

        onInit: function (tab, navigation, index) {
          // check number of tabs and fill the entire row
          var $total = navigation.find('li').length
          var  $width = 100 / $total
          var $wizard = navigation.closest('.wizard-card')

          var $display_width = $(document).width()

          if ($display_width < 600 && $total > 3) {
            $width = 50
          }

          navigation.find('li').css('width', $width + '%')
          var $first_li = navigation.find('li:first-child a').html()
          var $moving_div = $('<div class="moving-tab">' + $first_li + '</div>')
          $('.wizard-card .wizard-navigation').append($moving_div)
          refreshAnimation($wizard, index)
          $('.moving-tab').css('transition', 'transform 0s')
        },

        onTabClick: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').valid()

          if (!$valid) {
            return false
          } else {
            return true
          }
        },

        onTabShow: function (tab, navigation, index) {
          var $total = navigation.find('li').length
          var $current = index + 1

          var $wizard = navigation.closest('.wizard-card')

          // If it's the last tab then hide the last button and show the finish instead
          if ($current >= $total) {
            $($wizard).find('.btn-next').hide()
            $($wizard).find('.btn-finish').show()
          } else {
            $($wizard).find('.btn-next').show()
            $($wizard).find('.btn-finish').hide()
          }

          var button_text = navigation.find('li:nth-child(' + $current + ') a').html()

          setTimeout(function () {
            $('.moving-tab').text(button_text)
          }, 150)

          var checkbox = $('.footer-checkbox')

          if (!index == 0) {
            $(checkbox).css({
              'opacity': '0',
              'visibility': 'hidden',
              'position': 'absolute'
            })
          } else {
            $(checkbox).css({
              'opacity': '1',
              'visibility': 'visible'
            })
          }

          refreshAnimation($wizard, index)
        }
      })

      // Prepare the preview for profile picture
      $('#wizard-picture').change(function () {
        readURL(this)
      })

      $('[data-toggle="wizard-radio"]').click(function () {
        var wizard = $(this).closest('.wizard-card')
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active')
        $(this).addClass('active')
        $(wizard).find('[type="radio"]').removeAttr('checked')
        $(this).find('[type="radio"]').attr('checked', 'true')
      })

      $('[data-toggle="wizard-checkbox"]').click(function () {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active')
          $(this).find('[type="checkbox"]').removeAttr('checked')
        } else {
          $(this).addClass('active')
          $(this).find('[type="checkbox"]').attr('checked', 'true')
        }
      })

      $('.set-full-height').css('height', 'auto')
    },
    name: 'Register',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
